<script setup lang="ts">
  import { useGetVideoInfo } from '@/services/pages/know/useVideo'
  import { watch } from 'vue'

  const { info, getInfoLoading, getInfo } = useGetVideoInfo()

  defineOptions({
    name: 'VideoPreviewModal',
  })

  const props = defineProps({
    videoId: {
      type: String,
      required: true,
    },
  })

  // 抽屉显示状态
  const visible = defineModel('visible', { type: Boolean, default: false })

  watch(
    visible,
    (value) => {
      if (value) {
        getInfo(props.videoId)
      }
    },
    { immediate: true },
  )
</script>

<template>
  <h-drawer v-model="visible" title="视频预览" :width="1000" unit="px" :loading="getInfoLoading">
    <div class="video-preview">
      <div class="info-list-wrapper">
        <div class="info-item">
          <div class="label">视频名称:</div>
          <div class="value">{{ info.name }}</div>
        </div>
        <div class="info-item">
          <div class="label">更新时间:</div>
          <div class="value">{{ info.updateTime }}</div>
        </div>
      </div>
      <div class="cover">
        <div class="title">视频封面:</div>
        <h-image
          v-if="info.image"
          :src="info.image"
          :width="80"
          :height="50"
          :show-del-btn="false"
          :padding="2"
        ></h-image>
      </div>
      <div class="video-list-wrapper">
        <div class="title">视频列表:</div>
        <template v-if="info.videoPaths.length != 0">
          <div class="list">
            <video
              v-for="item in info.videoPaths"
              :key="item.path"
              class="video_item"
              :src="item.path"
              controls
              loop
              width="300"
            ></video>
          </div>
        </template>
        <el-empty v-else />
      </div>
    </div>

    <template #footer>
      <h-button is-modal @click="visible = false">关闭</h-button>
    </template>
  </h-drawer>
</template>

<style scoped lang="scss">
  .video-preview {
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    .info-list-wrapper {
      display: flex;
      column-gap: 32px;

      .info-item {
        display: flex;
        column-gap: 5px;
        align-items: center;

        .label {
          color: #606266;
        }
      }
    }

    .cover {
      .title {
        color: #606266;
        margin-bottom: 4px;
      }
    }

    .video-list-wrapper {
      display: flex;
      flex-direction: column;
      row-gap: 4px;

      .title {
        color: #606266;
      }

      .list {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
      }
    }
  }
</style>
